<template>
	<view class="schedule-container">
		<!-- 使用公共自定义导航栏 -->
		<custom-navbar :title="formattedCurrentDate" />
		
		<!-- 主内容区域 -->
		<view class="content-wrapper">
			<!-- 日历组件 -->
			<calendar-view 
				:selected-date="currentDate" 
				@date-selected="onDateSelected"
				ref="calendarViewRef"
			/>
			
			<!-- 日程列表 -->
			<schedule-list 
				:selected-date="currentDate" 
				@edit="handleEditSchedule"
				@delete="handleDeleteSchedule"
				ref="scheduleListRef"
			/>
		</view>
		
		<!-- 添加日程浮动按钮 -->
		<add-button @add="handleAdd" />
		
		<!-- 底部导航栏 -->
		<tab-bar />
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import CalendarView from './components/calendar-view.vue';
import ScheduleList from './components/schedule-list.vue';
import AddButton from './components/add-button.vue';

// 组件引用
const calendarViewRef = ref(null);
const scheduleListRef = ref(null);

// 当前选中日期
const currentDate = ref(new Date());

// 格式化当前日期（月日+简约视图）- 用于导航栏标题
const formattedCurrentDate = computed(() => {
	if (calendarViewRef.value) {
		return calendarViewRef.value.formattedCurrentDate;
	}
	const month = currentDate.value.getMonth() + 1;
	const day = currentDate.value.getDate();
	return `${month}月${day}日·简约视图`;
});

// 日期被选择
const onDateSelected = (date) => {
	currentDate.value = date;
};

// 添加日程
const handleAdd = () => {
	uni.navigateTo({
		url: '/pages/schedule/add'
	});
};

// 编辑日程
const handleEditSchedule = (schedule) => {
	console.log('编辑日程', schedule);
	uni.navigateTo({
		url: `/pages/schedule/edit?id=${schedule.id}`
	});
};

// 删除日程
const handleDeleteSchedule = (schedule) => {
	console.log('删除日程', schedule);
	uni.showModal({
		title: '确认删除',
		content: '确定要删除该日程吗？',
		success: (res) => {
			if (res.confirm) {
				console.log('执行删除操作');
				// 实际应用中这里应该调用API删除日程
				// 删除成功后刷新列表
				if (scheduleListRef.value) {
					scheduleListRef.value.fetchScheduleList();
	}
			}
		}
	});
};

// 页面加载时初始化
onMounted(() => {
	// 组件内部已有初始化逻辑
});

// 页面显示时更新
onShow(() => {
	// 刷新日程列表
	if (scheduleListRef.value) {
		scheduleListRef.value.fetchScheduleList();
	}
	// 通知tab-bar更新
	uni.$emit('tabPageShow');
});
</script>

<style lang="scss" scoped>
.schedule-container {
	min-height: 100vh;
	height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
	
	// 主内容区域
	.content-wrapper {
		margin-top: var(--status-bar-height);
		padding-top: 90rpx; // 导航栏高度
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--status-bar-height) - 90rpx - 100rpx - env(safe-area-inset-bottom)); // 减去状态栏、导航栏、底部导航和安全区域的高度
		overflow: hidden;
			}
		}
		
// 确保tab-bar组件固定在底部
::v-deep .tab-bar-container {
		position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 100;
}
</style>
